<script>
import closeIcon from "../../static/close_fill.png"
import { getShowImage } from "../../utils"

//该弹框可以实现。当出现多个弹框需要弹出时，可以通过队列依次弹出，而不是同时弹出
export default {
  name: "index",
  methods: {
    getShowImage,
    //供外部组件调用
    addPopupItem(imageUrl, popupClick = () => {}, popupClose) {
      this.popupList.push({
        imageUrl,
        popupClick,
        popupClose,
      })
      //打开弹框
      if (!this.showPopup) this.open()
    },
    open() {
      if (this.popupList.length > 0) {
        this.showPopup = true
        this.popupImage = this.popupList[0].imageUrl
        this.popupClick = this.popupList[0].popupClick
        this.popupClose = this.popupList[0].popupClose
        this.$refs.popup.open()
        this.popupList.shift()
      }
    },
    handlePopupClick() {
      if (this.popupClick) {
        this.popupClick()
      }
      this.close()
    },
    close() {
      this.$refs.popup.close()
      if (this.popupClose) {
        this.popupClose()
      }
      this.showPopup = false
      //打开 下一个 弹框
      this.open()
    },
  },
  data() {
    return {
      popupImage: "",
      popupClick: null,
      popupClose: null,
      popupList: [],
      showPopup: false,
      closeIcon,
    }
  },
  props: {
    showClose: {
      type: Boolean,
      default: true,
    },
    imageWidth: {
      type: String,
      default: "80vw",
    },
  },
}
</script>

<template>
  <uni-popup ref="popup" :is-mask-click="false">
    <view class="popup-container">
      <image
        :src="getShowImage(popupImage)"
        mode="widthFix"
        class="image"
        @click="handlePopupClick"
        :style="{ width: imageWidth }"
        :show-menu-by-longpress="true"
      ></image>
      <image class="close-btn" :src="closeIcon" @click="close" v-if="showClose"></image>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.popup-container {
  display: flex;
  align-items: center;
  flex-direction: column;

  .close-btn {
    width: 60rpx;
    height: 60rpx;
    margin-top: 30rpx;
  }
}
</style>
